<template>
	<u-list :height="screenHeight">
		<view>
			<view class="detail-top">
				<image src="../../../../static/logo.png" mode=""></image>
				<view class="detail-price">
					<text>200</text>
					<text>预约</text>
				</view>
				<view class=""><text class="details-Title">入职体检套餐</text></view>
			</view>
			<!-- 选择时间段 -->
			<view class="week-box">
				<view class="title">选择预约时段</view>
				<u-scroll-list>
					<view class="week-view">
						<view class="week-item">
							<text>周三</text>
							<text>有号</text>
						</view>
						<view class="week-item">
							<text>周三</text>
							<text>10-30</text>
							<text>有号</text>
						</view>
						<view class="week-item">
							<text>周三</text>
							<text>有号</text>
						</view>
						<view class="week-item">
							<text>周三</text>
							<text>有号</text>
						</view>
					</view>
				</u-scroll-list>
			</view>

			<!-- 适用人群 -->
			<view class="fit-person">
				<view class="title">适用人群</view>
				<view class="fit-person-box">
					<view class="fit-person-view">
						<image src="../../../../static/logo.png" mode="aspectFill"></image>
						<text>已婚</text>
					</view>
					<view class="fit-person-view">
						<image src="../../../../static/logo.png" mode="aspectFill"></image>
						<text>已婚</text>
					</view>
					<view class="fit-person-view">
						<image src="../../../../static/logo.png" mode="aspectFill"></image>
						<text>已婚</text>
					</view>
				</view>
			</view>
			<!-- 套餐项目 -->
			<view class="meal-list">
				<view class="meal-title">套餐项目</view>
				<view class="meal-view">
					<text class="meal-view-title">111</text>
					<view class="meal-item">
						<view class="">111</view>
						<view class="">222</view>
					</view>
				</view>
			</view>
			<!-- 底部提交 -->
			<view class="sub-box">
				<view class="sum">检测费用 : 1000</view>
				<view><u-button type="primary" @click="show = true" text="选择成员"></u-button></view>
			</view>
			
			<!-- 弹框 -->
			<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
					<view class="pop-box">
			            <view class="title">
			            	选择成员
			            </view>
						<view class="change-people">
							<image src="../../../../static/logo.png" mode=""></image>
							<text @click="goChangeMember">选择成员 > </text>
						</view>
						<view class="pop-btn">
							<u-button type="primary" text="提交预约"></u-button>
						</view>
					</view>
				</u-popup>
		</view>
	</u-list>
</template>

<script>
export default {
	data() {
		return {
			// 页面高度
			screenHeight: 0,
			// 底部弹框的显示
			show: false
		};
	},
	methods:{
		open() {
		        // console.log('open');
		      },
		      close() {
		        this.show = false
		        // console.log('close');
		      },
			  // 选择成员
			  goChangeMember(){
				  uni.navigateTo({
				  	url:'../../myPatient/managePatient/managePatient'
				  })
			  }
	},
	mounted() {
		//获取页面高度
		this.screenHeight = uni.getSystemInfoSync().windowHeight - 50; //获取当前页面的高度
	}
};
</script>

<style lang="less">
page {
	background-color: #fafafa;
}
.detail-top {
	background-color: #ffffff;
	image {
		width: 100%;
		height: 400rpx;
		display: block;
	}
	.detail-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		text:nth-child(1) {
			font-size: 35rpx;
			font-weight: bold;
			color: #ff5f2c;
		}
	}
	.details-Title {
		padding: 0 0 20rpx 20rpx;
		display: block;
		font-weight: bold;
		font-size: 35rpx;
	}
}
.week-box {
	.title {
		margin: 10rpx 0 10rpx 15rpx;
	}
	border-radius: 10rpx;
	border-radius: 10rpx;
	background-color: #ffffff;
	height: 240rpx;
	margin-top: 16rpx;
	padding: 10rpx;
	.week-view {
		display: flex;
		.week-item {
			margin-right: 10rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			width: 190rpx;
			height: 140rpx;
			background-color: #e6e6e6;
		}
	}
}
// 适用人群
.fit-person {
	background-color: #ffffff;
	margin-top: 20rpx;
	padding-top: 4rpx;
	.title {
		margin: 16rpx 16rpx;
	}
	.fit-person-box {
		display: flex;
		justify-content: space-around;
	}
	.fit-person-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 100rpx;
			height: 100rpx;
			display: block;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
		}
	}
}
// 套餐项目
.meal-list{
	.meal-title{
		margin: 16rpx 16rpx;
	}
	margin-top: 10rpx;
	padding-top: 4rpx;
	background-color: #ffffff;
	.meal-view-title{
		background-color: #f0f2f8;
		  display: block;
		  border-radius: 10rpx;
		  font-weight: bold;
		  text-align: center;
		  padding: 20rpx 0;
		  margin: 20rpx 0;
	}
	.meal-item{
		  display: flex;
		  flex-wrap: wrap;
		  view{
		    margin: 5rpx;
		    background-color: #f0f2f8;
		    border-radius: 10rpx;
		    padding: 20rpx 10rpx;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		  }
		  view:nth-child(1){
		    width: 200rpx;
		    margin-left: auto;
		  }
		  view:nth-child(2){
		    flex: 1;
		    margin-right: auto;
		  }
	}
}
// 底部栏
.sub-box {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1rpx #f5f5f5 solid;
	padding: 0 26rpx;
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.sum {
		color: #ea7843;
	}
	.u-button {
		height: 60rpx !important;
	}
}
// 底部弹框
.pop-box{
	display: flex;
	justify-content: space-around;
	height: 400rpx;
	flex-direction: column;
	align-items: center;
	.change-people{
		display: flex;
		width: 100%;
		justify-content: space-around;
		align-items: center;
		image{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
		text{
			color:#7fa2c8;
		}
	}
	.pop-btn{
		width: 80%;
	}
}
</style>
